<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width: 500px;">
      <el-row>
        <el-col :span="24">
          <el-form-item label="系统定位" prop="dwAddress">
            <el-row>
              <el-col :span="20">
                <el-input v-model="form.dwAddress" placeholder="请输入系统定位" />
              </el-col>
              <el-col :span="4">
                <el-button type="primary" @click.native="showMap" style="margin-left: 20px;">地图</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定位经度" prop="dwLongitude">
            <el-input v-model="form.dwLongitude" placeholder="请输入定位经度" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="定位维度" prop="dwLatitude">
            <el-input v-model="form.dwLatitude" placeholder="请输入定位维度" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="层级" prop="hierarchy">
            <el-input-number v-model="form.hierarchy" placeholder="请输入层级" :precision="0" :min="5" :max="19" />
          </el-form-item>
        </el-col>
<!--        <el-col :span="24">-->
<!--          <el-form-item label="首页设置">-->
<!--            <editor v-model="form.indexset" :min-height="192"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

    <el-dialog title="系统定位" :visible.sync="mapOpen" width="900px" append-to-body >
      <el-form  :inline="true" label-width="68px">
        <el-form-item label="城市名" >
          <el-row>
            <el-col :span="12">
              <el-input v-model="cityName" placeholder="请输入城市名" />
            </el-col>
            <el-col :span="12">
              <el-button type="primary" icon="el-icon-search" @click="mapQuery" style="margin-left: 10px;">搜索</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <!--<div id="sitemap" class="mapH" style="width: 100%;"></div>-->
      <div id="sitemap" class="mapH" style="width: 100%;height: 400px;"></div>
    </el-dialog>

  </div>
</template>

<script>
import { getSysConfig, updateSysConfig } from "@/api/basic/sysConfig";
import { MP } from "@/api/tool/map.js";
import Editor from '@/components/Editor';

export default {
  name: "SysConfig",
  components: {
    Editor
  },
  data() {
    return {
      ak:'PBN22I5Vj9bmNHV47jqkKwiezrwlU3jF',
      mapOpen: false,
      cityName: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      }
    };
  },
  created() {
    this.handleUpdate();
  },
  methods: {
    mapQuery() {
      if(this.cityName === ""){

      }else{
        this.map.centerAndZoom(this.cityName);      // 用城市名设置地图中心点
      }
    },
    showMap(){
      this.mapOpen = true;
      this.$nextTick(() => {
        const _this = this
        MP(_this.ak).then(BMap => {
          _this.initMap();
        })
      });
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        dwAddress: null,
        dwLongitude: null,
        dwLatitude: null,
        hierarchy: null,
        indexset:null
      };
      this.resetForm("form");
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.reset();
      getSysConfig().then(response => {
        this.form = response.data;
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateSysConfig(this.form).then(response => {
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    initMap(){
      let _this=this;
      let point = null;
      if(_this.form.dwLongitude != undefined && _this.form.dwLatitude!= undefined){
        point =new BMap.Point(_this.form.dwLongitude, _this.form.dwLatitude);
      }else {
        point =new BMap.Point('116.39499', '39.920664');
      }
      let sitePng = require('@/assets/image/area.png');
      let marker=new BMap.Marker(point,{icon:new BMap.Icon(sitePng, new BMap.Size(34, 50), {
          offset: new BMap.Size(17, 25)
        })
      });
      this.map = new BMap.Map("sitemap",{enableMapClick: false});
      this.map.centerAndZoom(point,10);
      this.map.enableScrollWheelZoom();
      this.map.addControl(new BMap.OverviewMapControl());
      this.map.addControl(new BMap.ScaleControl());
      this.map.addOverlay(marker);
      this.geoc = new BMap.Geocoder();
      this.map.addEventListener("click", function(evt){
        let pt = evt.point;
        _this.geoc.getLocation(pt, function(rs){
          let addComp = rs.addressComponents;
          let address = addComp.province + addComp.city + addComp.district + addComp.street;
          _this.$confirm("是否将地址:"+address+"("+pt.lng + "," + pt.lat+")设置为测点地址?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(function() {
            _this.form.dwAddress=address;
            _this.form.dwLongitude=pt.lng;
            _this.form.dwLatitude=pt.lat;
            _this.mapOpen = false;
          }).then(() => {
            //_this.mapOpen = false;
          }).catch(function() {
            _this.mapOpen = false;
          });
        });
      });

      this.map.setMapStyle({
        styleJson:[{"featureType":"subway","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"railway","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"airportlabel","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"scenicspotslabel","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"educationlabel","elementType":"all","stylers":{"visibility":"off"}},{"featureType":"medicallabel","elementType":"all","stylers":{"visibility":"off"}},		{"featureType":"subwaystation","elementType":"all","stylers":{"visibility":"off"}}]
      });

    },
  }
};
</script>
